<template>
  <div class="home-content">
    <div class="baseMap" id="baseMap"></div>
    <MapBox />
  </div>
</template>

<script setup>
  import MapBox from "@/components/MapBox.vue";
  import { onMounted, inject } from "vue";
  import AMapLoader from "@amap/amap-jsapi-loader";
  const bus = inject("bus");

  const initMap = () => {
    AMapLoader.load({
      key: "e5a485f5ed9cfe6ab78394fe306c3b74",
      version: "2.0",
      plugins: [
        "AMap.Scale", // 比例尺
        "AMap.ToolBar", // 工具条
        "AMap.MapType", // 地图类型
        "AMap.Geolocation", // 定位
        "AMap.AutoComplete", // 输入提示
        "AMap.PlaceSearch", // POI搜索
      ], // 使用的插件列表
    })
      .then(AMap => {
        const myMap = new AMap.Map(baseMap, {
          zoom: 11,
          zooms: [5, 20], // 设置缩放级别范围
          center: [116.397428, 39.90923], // 设置地图的初始坐标
          resizeEnable: true, // 启用地图缩放
          mapStyle: "amap://styles/grey", //设置地图的显示样式
          viewMode: "2D", //设置地图模式
        });
        //
        bus.emit("map", { map: myMap, AMap });
      })
      .catch(e => {
        console.error("高德地图加载失败", e);
      });
  };
  onMounted(() => {
    initMap();
  });
</script>
<style lang="scss" scoped>
  .home-content {
    position: relative;
    width: 100%;
    height: 100%;
    // pointer-events: none;

    #baseMap {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
</style>
